<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="骡窝窝商城" http-equiv="keywords">
    <meta name="description" content="骡窝窝商城">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <title>骡窝窝商城</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/zy.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.min.css" type="text/css">
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">


    <script>
        var user = JSON.parse(sessionStorage.getItem("user"));
        //获取地址栏信息
        var params = getParams();
        var typel; //规格
        var productInfo;//商品信息
        //查询商品的具体明细
        $.get("/products/" + params.id, function (data) {
            productInfo = data;
            console.log(data);
            //页面滚动图片
            $(".swiper_container_suz1").renderValues(data);

            var swiper = new Swiper('.swiper_container_suz1', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                pagination: '.swiper-pagination',
                paginationType: 'fraction',
                autoplay: 3500
            });
            console.log(data);
            //商品信息
            $("#productId").renderValues(data, {
                getSpecs: function (item, value) {
                    $(item).html(value[0].name);
                    typel = value[0].id;
                }
            });

            //弹出
            $("#temp").renderValues(data, {
                getSpecsId: function (item, value) {
                    $(item).attr("data-specs", value);
                    console.log($(item).data("specs"));
                }
            });

            //异步请求完成为分类属性绑定点击选中事件
            $("#typel li").click(function () {
                var typeName = $(this).html();
                $("#spe").html(typeName);
                typel = $(this).data("specs");
                console.log(typel);
            })
        });
        //猜你喜欢 同一类
        $.get("/products/" + params.sortId + "/product", function (data) {
            console.log(data);
            $("#listProduct").renderValues(data, {
                //点击商品将商品id渲染到商品详情页面
                getJsonHref: function (item, value) {
                    if (value) {
                        var json = JSON.parse(value);
                        console.log(json);
                        $(item).prop("href", "/shopping/productHomePage.html?id=" + json.id + "&sortId=" + json.sortId);
                    }
                },
                getImg: function (item, value) {
                    $(item).attr("src", value[0]);
                }
            });
        });

        $(function () {
            //获取当前登录用户id
            var user = JSON.parse(sessionStorage.getItem("user"));
            //加的效果
            $(".add").click(function () {
                var n = $(this).prev().val();
                var num = parseInt(n) + 1;
                if (num == 0) {
                    return;
                }
                $(this).prev().val(num);
            });
            //减的效果
            $(".jian").click(function () {
                var n = $(this).next().val();
                var num = parseInt(n) - 1;
                if (num == 0) {
                    return
                }
                $(this).next().val(num);
            });

            //回显已选
            $(".productspecs li").click(function () {
                var a = $(this).html();
                console.log(a);
                $("#spe").html(a);
            })
            $("#numbers i").click(function () {
                var b = $("input[value]").val();
                console.log($("input[value]").val());
                $("#nums").html(b);
            })

            //添加购物车
            $("#addCarBtn").click(function () {
                //先判断用户有没有登录
                if (!user) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: false,
                        content: '先登录下吧,亲',
                        onClickConfirmBtn: function () {
                            location.href = "/login.html"
                        }
                    })
                }
                //获取选取的商品信息
                //获取商品的数量
                $(".count").val();
                //获取用户的id
                user.id;
                //获取商品的id
                params.id;
                var carInfo = {
                    "specs.id": typel,
                    count: $(".count").val(),
                    "user.id": user.id,
                    "product.id": params.id
                }
                console.log(carInfo);
                //发送ajax将数据保存到购物车中
                $.post("/users/cart", carInfo, function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '亲,加入购物车成功,是否跳转到您的购物车',
                            onClickConfirmBtn: function () {
                                location.href = "/mine/shoppingCart.html?id=" + user.id;
                            }
                        })
                    }
                    else {
                        $(document).dialog({
                            type: 'alert',
                            closeBtnShow: false,
                            content: '选全商品信息,亲',
                        })
                    }
                })
            })

            console.log(typel);
            //立即购买
            $(".houm").click(function () {
                //先判断用户有没有登录
                if (!user) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: false,
                        content: '先登录下吧,亲',
                        onClickConfirmBtn: function () {
                            location.href = "/login.html"
                        }
                    })
                }

                //获取商品的数量
                $(".count").val();
                console.log($(".count").val());
                //获取用户的id
                user.id;
                //获取商品的id
                params.id;

                productInfo = {
                    "specs.id": typel,
                    count: $(".count").val(),
                    "user.id": user.id,
                    "product": {
                        id: productInfo.id,
                        imgUrl: productInfo.imgArr,
                        title: productInfo.title,
                        price: productInfo.price,
                    }
                }
                console.log(productInfo);
                var money;
                //计算金钱
                var price = productInfo.product.price;
                console.log(price);
                //拿到数量
                var count = productInfo.count;
                console.log(count);
                money = price * count;
                console.log(money);
                //判断用户有没有勾选商品信息
                if (!typel == 0) {
                    var temp = [];
                    temp.push(productInfo);
                    console.log(productInfo);
                    //将商品信息保存到作用域中
                    sessionStorage.setItem("carInfo", JSON.stringify(temp));
                    //将金钱总额保存到作用域中
                    sessionStorage.setItem("money", JSON.stringify(money));


                    var carInfo = {
                        "specs.id": typel,
                        count: $(".count").val(),
                        "user.id": user.id,
                        "product.id": params.id
                    }


                    $.post("/users/cartSave", carInfo, function (data) {
                        console.log(data);
                        location.href = "/mine/orderPage.html?cids=" + data.id + "&id=" + user.id;

                    })


                }

            })

            //详情按钮
            $("#details").click(function () {
                var url = $(this).data("href");
                window.location.href = url + params.id;
            })
            //购物车按钮
            $("#GouWuChe").click(function () {
                var href = $(this).data("href");
                $(this).attr("href", href + user.id);
            })
        })
    </script>
</head>
<body>
<!--页面内容
<div id="yemnr">-->
<!--头部-->
<div class="toub_beij toub_beij_zy">
    <div class="zhongj_k zhongj_k_z">
        <div class="jiu_feo">
            <div class="logo_k logo_k_fanh"><a href="javascript:history.go(-1);"><img class="fanh_ann"
                                                                                      src="images/web/fanh.png"></a>
            </div>
            <div class="zhongjain_daoh">
                <ul>
                    <li class="xiangq"><a href="productHomePage.html">商品</a></li>
                    <li><a data-href="/shopping/productDetails.html?id=" id="details">详情</a></li>
                    <li><a href="评论.html">评价</a></li>
                </ul>
            </div>
        </div>
        <div class="dengl">
            <div class="caid_img" id="zhu_caid"><img src="images/web/cd_1.png"></div>
            <ul class="zhu_daoh" id="daoh_lb">
                <em></em>
                <li><a href="index.html">首页</a></li>
                <li><a href="sort.html">商品分类</a></li>
                <li><a href="#">扫一扫</a></li>
                <li><a href="car.html">购物车</a></li>
                <li class="wu"><a href="#">我的通城</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    //滑动头部透明（针对首页头部用）
    window.onscroll = function () {

        var autoheight = document.body.scrollTop || document.documentElement.scrollTop;
        if (autoheight > 10) {
            $(".toub_beij").css("position", "fixed")
        } else {
            $(".toub_beij").css("position", "relative")
        }
    }
</script>
<!--内容-->
<!--banner-->
<div class="swiper_container_suz1">
    <div class="swiper-wrapper" render-loop="imgArr">
        <div class="swiper-slide">
            <a href=""><img render-src="imgArr.self" style="width: 80%"></a>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
</div>


<!--商品名称-->
<div id="productId">
    <div class="xiangq_shangp_m">
        <p class="px26" render-html="title"></p>
        <div class="xq_jiaq"><p>￥<em render-html="price"></em>.00</p><span>原价：<i>￥70.00</i></span></div>
    </div>
    <!--商品参数选择-->
    <div class="cans_xuanz" id="dianjisj">
        <p>已选：
            <em class="px22" id="spe" render-key="productSpecs" render-fun="getSpecs"></em>&emsp;
            <em><span id="nums">1</span>个</em><i></i>
        </p>
    </div>
</div>
<!--弹出选择-->
<aside class="wup_xuanz" id="xianq_tanc">
    <div class="bg" id="ds"></div>
    <div class="wup_kuan" id="tanchu_d">
        <div class="youk_1" id="temp">
            <div class="shang_sp">
                <h1><img render-src="imgArr.self" style="width: 80%"></h1>
                <p class="px24">￥<em class="px26" render-html="price">￥5600.00</em>.00<br>有货</p>
                <span class="close_standard" id="chacha"></span>
            </div>
            <div class="banb" id="banb">
                <ul id="typel">
                    <h1>规格</h1>
                    <div class="productspecs" render-loop="productSpecs">
                        <li render-html="productSpecs.name" render-key="productSpecs.id" render-fun="getSpecsId"></li>
                    </div>
                </ul>
            </div>
            <div class="goum_sl">
                <p class="px22">数量<em>限购20件</em></p>
                <div class="counter_box" id="numbers">
                    <i class="jian">-</i>
                    <input type="text" value="1" class="count"/>
                    <i class="add">+</i>
                </div>
            </div>
            <div class="goum">
                <a href="#" id="addCarBtn">加入购物车</a>
                <a class="houm">立即购买</a>
            </div>
        </div>
    </div>
</aside>
<!--店铺-->
<div class="xiangq_dp_k">
    <div class="dianpulogo">
        <h1><img src="images/web/dainpu_logo.jpg"></h1>
        <div class="dianp_pf">
            <p class="px24">骡窝窝官方旗舰店</p>
            <div class="xx">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <span><em>4.50</em>分</span>
            </div>
        </div>
    </div>
    <div class="pf_a">
        <p>商品描述<em>4.55</em></p>
        <p class="z">发货速度<em>4.15</em></p>
        <p class="you">服务质量<em>5.00</em></p>
    </div>
    <div class="jindain_anniu">
        <a href="/shopping/index.html" class="a1"><h1><img src="images/web/dainp01.png"></h1>进店逛逛</a>
        <a href="#" class="a2"><h1><img src="images/web/dianpu_shouc.png"></h1>收藏店铺</a>
    </div>
</div>
<!--店铺 简介-->
<div class="dp_jj">
    <p>地址：广州市天河区棠下大地工业区7楼</p>
    <p>联系人：超美丽</p>
    <p>电话：0852-8667011</p>
    <p>营业时间：09:00至18:00</p>
    <h1>公司简介：</h1>
    <p>精选商家,服务保障,为你而存在</p>
</div>
<!--评价-->
<div class="pj_k">
    <div class="bt"><p>评价<em>（100+）</em></p><span>好评度  <em>95%</em></span></div>
    <div class="toux_k"><h1><img src="images/web/6565.jpg"></h1>
        <span>Aa***hg</span>
        <div class="sd"><p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p></div>
    </div>
    <p class="px22">东西收到了呢,物流很快,东西也是我想要的,完美的一次购物。五分</p>
</div>
<div class="lianjie">
    <a href="评论.html">查看更多评价</a>
</div>

<!--差你喜欢-->
<div class="cainixhk" id="listProduct">
    <h1>猜你喜欢</h1>
    <ul render-loop="list">
        <li>
            <a href="#" render-key="list.json" render-fun="getJsonHref">
                <h1><img render-key="list.imgArr" render-fun="getImg" style="width: 80%"></h1>
                <div class="px26">
                    <div class="xq_jiaq"><p>￥<em render-html="list.price">5600</em>.00</p></div>
                </div>
                <p render-html="list.title"></p>
            </a>
        </li>
    </ul>
</div>

<!--底部导航-->
<!---->
<div class="dib_daoh_b">
    <div class="gouwuc_">
        <div class="zuo">
            <div class="mis"><a href="#"><h1><img src="images/web/ms01.png"></h1>
                <p>密使</p></a></div>
            <div class="mis"><a href="#" id="dianji_img"><h1><img src="images/web/ms03.png" id="img_tih"></h1>
                <p>收藏</p></a></div>
            <div class="mis"><a data-href="/shopping/shoppingCart.html?id=" id="GouWuChe"><h1><img
                    src="images/web/ms02.png"></h1>
                <p>购物车</p></a></div>
        </div>
        <div class="you">
            <div class="goum">
                <a href="#" class="addCarBtn" id="cebianlan">加入购物车</a>
                <a class="houm" href="#">立即购买</a>
            </div>
        </div>
    </div>
</div>
</div>

<!--大框div
</div>-->
<!--搜索页面-->


</body>
</html>

<script type="text/javascript">
    window.onload = function () {
        var TheMenu = document.getElementById('zhu_caid');
        var LieBiao = document.getElementById('daoh_lb');
        var Html = document.getElementsByTagName("html")[0];//0 第一个数组
        TheMenu.onclick = function (event) {
            if (LieBiao.style.display == 'block') {
                LieBiao.style.display = 'none';
            }
            else {
                LieBiao.style.display = 'block';
            }
            event.stopPropagation();//阻止冒泡事件
        }
        Html.onclick = function () {
            LieBiao.style.display = 'none';
        }

        //点击事件
        var DianJ = document.getElementById('dianjisj');
        var Cebian = document.getElementById('cebianlan');
        var XiangQTC = document.getElementById('xianq_tanc');
        var TanC = document.getElementById('tanchu_d');
        var YiChuL = document.getElementById('ds');
        var Ca = document.getElementById('chacha');
        DianJ.onclick = function () {
            TanC.className += ' slide_in';
            XiangQTC.style.display = 'block';
            YiChuL.style.opacity = '0.4';
        }
        Cebian.onclick = function () {
            TanC.className += ' slide_in';
            XiangQTC.style.display = 'block';
            YiChuL.style.opacity = '0.4';
        }
        YiChuL.onclick = function () {
            TanC.classList.remove("slide_in");
            XiangQTC.style.display = 'none';
        }
        Ca.onclick = function () {
            TanC.classList.remove("slide_in");
            XiangQTC.style.display = 'none';
        }

        var BanB = document.getElementById('banb');
        var BabBLi = BanB.getElementsByTagName('li');
        for (var i = 0; i < BabBLi.length; i++)//循环每个li的
        {
            BabBLi[i].onclick = function () {
                for (var i = 0; i < BabBLi.length; i++)//循环去掉li的样式
                {
                    BabBLi[i].className = '';
                }

                this.className = 'no';//自身添加className='no'
            }
        }
        var DianJ = document.getElementById('dianji_img');
        var ImgTiHuan = document.getElementById('img_tih');
        DianJ.onclick = function () {
            ImgTiHuan.src = 'images/web/ms03-1.png';
            alert("收藏成功");
        }

    };


</script>